<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <title>My test page</title>
  <link rel="stylesheet" href="styles/form_pay.css">
</head>

<body>
  <form action="">
    <h1>Payment form</h1>
    <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>

    <section>
      <h2>Contact information</h2>
      <fieldset>
        <legend>Title</legend>
        <ul>
          <li>
            <label for="title_1">
              <input type="radio" id="title_1" name="title" value="M.">
              Mister
            </label>
          </li>
          <li>
            <label for="title_2">
              <input type="radio" id="title_2" name="title" value="Ms.">
              Miss
            </label>
          </li>
        </ul>
      </fieldset>
      <p>
        <label for="name">
          <span>Name: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="text" id="name" name="username">
      </p>
      <p>
        <label for="mail">
          <span>E-mail: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="email" id="mail" name="usermail">
      </p>
      <p>
        <label for="pwd">
          <span>Password: </span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="password" id="pwd" name="password">
      </p>
    </section>

    <section>
      <h2>Payment information</h2>
      <p>
        <label for="card">
          <span>Card type:</span>
        </label>
        <select id="card" name="usercard">
          <option value="visa">Visa</option>
          <option value="mc">Mastercard</option>
          <option value="amex">American Express</option>
        </select>
      </p>
      <p>
        <label for="number">
          <span>Card number:</span>
          <strong><abbr title="required">*</abbr></strong>
        </label>
        <input type="number" id="number" name="cardnumber">
      </p>
      <p>
        <label for="date">
          <span>Expiration date:</span>
          <strong><abbr title="required">*</abbr></strong>
          <em>formatted as mm/yy</em>
        </label>
        <input type="date" id="date" name="expiration">
      </p>
    </section>
    <p> <button type="submit">Validate the payment</button> </p>
  </form>

</body>

</html>